MediaQuery in Flutter

MediaQuery is an important Flutter widget used to obtain information about the current application window and the environment in which the UI is displayed. It is especially useful for building responsive and adaptive applications that work across phones, tablets, foldable devices, desktop windows, and web browsers.

MediaQuery can provide information such as window size, padding, view insets, text scaling, platform brightness, accessibility settings, device pixel ratio, orientation, display features, and other media-related information.

1. What Is MediaQuery?

MediaQuery establishes a subtree where widgets can access MediaQueryData. In normal Flutter applications, MaterialApp and WidgetsApp provide the MediaQuery information for their descendants.

The most common use is determining the available application window size.

final size = MediaQuery.sizeOf(context);

print(size.width);
print(size.height);

Flutter's current API recommends using specific MediaQuery methods such as MediaQuery.sizeOf() and MediaQuery.paddingOf() when only one property is needed, because they create a more focused dependency and can avoid unnecessary rebuilds. :contentReference[oaicite:0]{index=0}

2. Why Is MediaQuery Important?

Different devices and application windows have different available dimensions. A layout that works perfectly on a mobile phone may become too narrow or too wide on another device.

MediaQuery allows the application to respond to these changes.

• Detect application window width.
• Detect application window height.
• Create responsive layouts.
• Change navigation according to available space.
• Read safe-area information.
• Respond to keyboard visibility.
• Read text scaling preferences.
• Detect platform brightness.
• Support accessibility-related UI behavior.
• Build adaptive interfaces for large screens.

3. Basic MediaQuery Syntax

MediaQuery.of(context)

This returns the complete MediaQueryData object.

For example:

final mediaQuery = MediaQuery.of(context);

print(mediaQuery.size.width);
print(mediaQuery.size.height);

However, when you only need a particular property, prefer the specific API:

final width = MediaQuery.sizeOf(context).width;
final height = MediaQuery.sizeOf(context).height;

4. MediaQuery.of() vs MediaQuery.sizeOf()

For example, if you only need width:

final width = MediaQuery.sizeOf(context).width;

This is generally preferable to:

final width = MediaQuery.of(context).size.width;

Flutter documents MediaQuery.sizeOf() as the preferred way to depend only on the size because it avoids rebuilding for unrelated MediaQuery changes. :contentReference[oaicite:1]{index=1}

5. MediaQueryData

MediaQueryData contains information about the current media or application window.

final data = MediaQuery.of(context);

print(data.size);
print(data.padding);
print(data.viewInsets);
print(data.devicePixelRatio);
print(data.platformBrightness);

Important MediaQueryData properties include:

• size
• padding
• viewPadding
• viewInsets
• systemGestureInsets
• devicePixelRatio
• textScaler
• platformBrightness
• orientation
• highContrast
• boldText
• accessibleNavigation
• disableAnimations
• displayFeatures

6. Getting Screen or Window Width

Width is one of the most frequently used MediaQuery values when building responsive interfaces.

final width = MediaQuery.sizeOf(context).width;

Text(
  'Width: $width',
)

Example

class WidthExample extends StatelessWidget {
  const WidthExample({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Width Example'),
      ),
      body: Center(
        child: Text(
          'Available width: $width',
          style: const TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

7. Getting Screen or Window Height

final height = MediaQuery.sizeOf(context).height;

Example

class HeightExample extends StatelessWidget {
  const HeightExample({super.key});

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.sizeOf(context).height;

    return Scaffold(
      body: Center(
        child: Text(
          'Available height: $height',
          style: const TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

8. Getting Both Width and Height

final size = MediaQuery.sizeOf(context);

final width = size.width;
final height = size.height;

Complete Example

class ScreenSizeExample extends StatelessWidget {
  const ScreenSizeExample({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.sizeOf(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen Size'),
      ),
      body: Center(
        child: Text(
          'Width: ${size.width.toStringAsFixed(0)}\n'
          'Height: ${size.height.toStringAsFixed(0)}',
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontSize: 22,
          ),
        ),
      ),
    );
  }
}

9. MediaQuery Uses Logical Pixels

MediaQueryData.size is expressed in logical pixels rather than raw physical pixels. Logical pixels are designed to provide approximately consistent visual sizing across displays with different pixel densities. :contentReference[oaicite:2]{index=2}

final width = MediaQuery.sizeOf(context).width;

For responsive layout decisions, logical dimensions are generally more useful than the physical resolution of the device.

10. Creating a Responsive Layout

A common use of MediaQuery is switching between layouts based on available width.

class ResponsivePage extends StatelessWidget {
  const ResponsivePage({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    if (width < 600) {
      return const MobileLayout();
    }

    return const LargeScreenLayout();
  }
}

Mobile Layout

class MobileLayout extends StatelessWidget {
  const MobileLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Mobile Layout'),
    );
  }
}

Large Screen Layout

class LargeScreenLayout extends StatelessWidget {
  const LargeScreenLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Large Screen Layout'),
    );
  }
}

11. Creating Mobile, Tablet, and Desktop Layouts

class ResponsiveHome extends StatelessWidget {
  const ResponsiveHome({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    if (width < 600) {
      return const MobileHome();
    }

    if (width < 1024) {
      return const TabletHome();
    }

    return const DesktopHome();
  }
}

The breakpoint values are application-design choices. They should be based on when the layout actually needs to change rather than assuming that a particular physical device always belongs to a specific category.

12. MediaQuery and Device Type

Avoid using MediaQuery to make assumptions about physical device categories.

For example, avoid designing the application around logic such as:

if (isTablet) {
  // Tablet
} else {
  // Phone
}

Instead, measure the available application window:

final width = MediaQuery.sizeOf(context).width;

if (width < 600) {
  // Compact layout
} else {
  // Expanded layout
}

This is important because a large device can run an application in a small window, such as in split-screen or a resizable desktop/web window. Flutter's adaptive-design guidance recommends using available window size rather than hardware type for layout decisions. :contentReference[oaicite:3]{index=3}

13. Responsive Container Width

MediaQuery can be used to calculate a percentage of the available width.

final width = MediaQuery.sizeOf(context).width;

Container(
  width: width * 0.8,
  height: 150,
  child: const Center(
    child: Text('80% Width'),
  ),
)

This creates a container that is approximately 80% of the available application width.

14. Responsive Height

final height = MediaQuery.sizeOf(context).height;

Container(
  height: height * 0.3,
  child: const Center(
    child: Text('30% Height'),
  ),
)

Percentage-based sizing can be useful in specific designs, but avoid making every dimension a percentage. Flexible layout widgets such as Expanded, Flexible, and constraints are often better for complex layouts.

15. Responsive Padding

final width = MediaQuery.sizeOf(context).width;

final padding = width < 600 ? 16.0 : 32.0;

return Padding(
  padding: EdgeInsets.all(padding),
  child: const Text(
    'Responsive Padding',
  ),
);

16. Responsive Font Size

final width = MediaQuery.sizeOf(context).width;

final fontSize = width < 600 ? 24.0 : 36.0;

Text(
  'Responsive Heading',
  style: TextStyle(
    fontSize: fontSize,
    fontWeight: FontWeight.bold,
  ),
)

However, typography should also respect accessibility text scaling. Avoid overriding user accessibility preferences simply to force a fixed visual size.

17. Responsive Cards

class ResponsiveCards extends StatelessWidget {
  const ResponsiveCards({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    final columns = width < 600
        ? 1
        : width < 1000
            ? 2
            : 3;

    return GridView.count(
      crossAxisCount: columns,
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      padding: const EdgeInsets.all(16),
      children: List.generate(
        6,
        (index) => Card(
          child: Center(
            child: Text('Card ${index + 1}'),
          ),
        ),
      ),
    );
  }
}

18. Responsive Navigation

MediaQuery can be used to select different navigation patterns according to available width.

class ResponsiveNavigation extends StatelessWidget {
  const ResponsiveNavigation({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    if (width < 600) {
      return Scaffold(
        body: const Center(
          child: Text('Mobile Content'),
        ),
        bottomNavigationBar: NavigationBar(
          destinations: const [
            NavigationDestination(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            NavigationDestination(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      );
    }

    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            selectedIndex: 0,
            onDestinationSelected: (index) {},
            destinations: const [
              NavigationRailDestination(
                icon: Icon(Icons.home),
                label: Text('Home'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.person),
                label: Text('Profile'),
              ),
            ],
          ),
          const Expanded(
            child: Center(
              child: Text('Large Screen Content'),
            ),
          ),
        ],
      ),
    );
  }
}

19. MediaQuery.padding

padding describes areas where application content may need to avoid system UI or display intrusions.

Use the specialized API:

final padding = MediaQuery.paddingOf(context);

print(padding.top);
print(padding.bottom);
print(padding.left);
print(padding.right);

Example

class PaddingExample extends StatelessWidget {
  const PaddingExample({super.key});

  @override
  Widget build(BuildContext context) {
    final padding = MediaQuery.paddingOf(context);

    return Scaffold(
      body: Padding(
        padding: padding,
        child: const Center(
          child: Text('Safe Content Area'),
        ),
      ),
    );
  }
}

20. MediaQuery and SafeArea

SafeArea uses MediaQuery information internally to protect content from system UI, display cutouts, notches, rounded corners, and similar intrusions. :contentReference[oaicite:4]{index=4}

Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        const Text('Header'),
        Expanded(
          child: ListView(
            children: const [
              ListTile(title: Text('Item 1')),
              ListTile(title: Text('Item 2')),
            ],
          ),
        ),
      ],
    ),
  ),
)

In many applications, SafeArea is simpler than manually reading padding values.

21. MediaQuery.viewInsets

viewInsets is particularly useful when dealing with system UI that completely obscures part of the application, such as the on-screen keyboard.

final viewInsets = MediaQuery.viewInsetsOf(context);

print(viewInsets.bottom);

When the software keyboard appears, the bottom view inset can increase.

Keyboard Example

class KeyboardAwarePage extends StatelessWidget {
  const KeyboardAwarePage({super.key});

  @override
  Widget build(BuildContext context) {
    final keyboardHeight =
        MediaQuery.viewInsetsOf(context).bottom;

    return Scaffold(
      body: Padding(
        padding: EdgeInsets.only(
          bottom: keyboardHeight,
          left: 20,
          right: 20,
          top: 20,
        ),
        child: const TextField(
          decoration: InputDecoration(
            labelText: 'Enter your name',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }
}

In many cases, Flutter's standard scrolling and layout widgets already handle keyboard-related layout behavior well, so manually applying the inset is not always necessary.

22. MediaQuery.viewPadding

viewPadding represents padding associated with areas of the display that are affected by system UI and physical display features.

final padding = MediaQuery.viewPaddingOf(context);

print(padding.top);
print(padding.bottom);

23. MediaQuery.systemGestureInsets

systemGestureInsets provides information about areas where system gestures may interfere with application gestures.

final insets =
    MediaQuery.systemGestureInsetsOf(context);

print(insets.left);
print(insets.right);
print(insets.bottom);

This can be useful for specialized gesture-heavy interfaces.

24. Detecting Orientation

MediaQuery provides an orientation-specific API.

final orientation =
    MediaQuery.orientationOf(context);

if (orientation == Orientation.portrait) {
  // Portrait
} else {
  // Landscape
}

However, orientation alone should not be used as the main responsive-layout strategy. A landscape window can still be too narrow for a wide layout. Available width is usually a more useful measurement for major layout decisions.

25. Orientation Example

class OrientationExample extends StatelessWidget {
  const OrientationExample({super.key});

  @override
  Widget build(BuildContext context) {
    final orientation =
        MediaQuery.orientationOf(context);

    return Scaffold(
      body: Center(
        child: Text(
          orientation == Orientation.portrait
              ? 'Portrait Mode'
              : 'Landscape Mode',
        ),
      ),
    );
  }
}

26. Device Pixel Ratio

MediaQuery can provide the device pixel ratio.

final ratio =
    MediaQuery.devicePixelRatioOf(context);

print('Device Pixel Ratio: $ratio');

The device pixel ratio describes the relationship between physical pixels and logical pixels.

27. Platform Brightness

You can determine whether the platform is currently using light or dark brightness.

final brightness =
    MediaQuery.platformBrightnessOf(context);

if (brightness == Brightness.dark) {
  print('Dark mode');
} else {
  print('Light mode');
}

For application theme management, it is generally preferable to configure Flutter's theme system rather than manually changing every widget based on this value.

28. Text Scaling

MediaQuery exposes the user's text scaling preference through textScaler.

final textScaler =
    MediaQuery.textScalerOf(context);

print(textScaler);

Modern Flutter uses TextScaler for text scaling. Older code may use textScaleFactor, but that API has been deprecated in favor of the newer text-scaling approach. :contentReference[oaicite:5]{index=5}

Why Text Scaling Matters

• Users may increase text size for readability.
• Accessibility services can affect text presentation.
• Layouts should be tested with larger text settings.
• Text should not be clipped simply because the user increases font size.

29. Accessibility Information

MediaQuery can expose accessibility-related settings.

final highContrast =
    MediaQuery.highContrastOf(context);

final boldText =
    MediaQuery.boldTextOf(context);

final accessibleNavigation =
    MediaQuery.accessibleNavigationOf(context);

These values can be used when an application genuinely needs to adapt its presentation or behavior to accessibility settings.

30. Detecting Reduced Animation Preference

Flutter also provides information about whether animations should be disabled.

final disableAnimations =
    MediaQuery.disableAnimationsOf(context);

if (disableAnimations) {
  // Reduce or disable non-essential animations.
}

This can help applications respect platform accessibility preferences.

31. High Contrast Mode

final highContrast =
    MediaQuery.highContrastOf(context);

if (highContrast) {
  // Provide appropriate high-contrast presentation.
}

32. MediaQuery and Desktop/Web

MediaQuery is particularly useful for Flutter web and desktop applications because the application window can be resized dynamically.

class DesktopResponsivePage extends StatelessWidget {
  const DesktopResponsivePage({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(
            maxWidth: 1200,
          ),
          child: Text(
            'Window width: $width',
          ),
        ),
      ),
    );
  }
}

33. Maximum Width on Large Screens

Do not automatically stretch every widget across the entire desktop window.

Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      maxWidth: 1000,
    ),
    child: Padding(
      padding: const EdgeInsets.all(24),
      child: Column(
        children: const [
          Text(
            'Main Content',
            style: TextStyle(fontSize: 28),
          ),
        ],
      ),
    ),
  ),
)

Flutter's adaptive-design guidance specifically recommends avoiding layouts that use the full width of large windows for boxes or text fields. :contentReference[oaicite:6]{index=6}

34. MediaQuery vs LayoutBuilder

Flutter's adaptive-layout guidance recommends choosing between MediaQuery and LayoutBuilder according to whether you need the size of the whole application window or the available space for a particular widget. :contentReference[oaicite:7]{index=7}

35. MediaQuery and LayoutBuilder Together

Both APIs can be used in the same application.

class Dashboard extends StatelessWidget {
  const Dashboard({super.key});

  @override
  Widget build(BuildContext context) {
    final screenWidth =
        MediaQuery.sizeOf(context).width;

    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          final contentWidth = constraints.maxWidth;

          return Center(
            child: Text(
              'Window: $screenWidth\n'
              'Content: $contentWidth',
              textAlign: TextAlign.center,
            ),
          );
        },
      ),
    );
  }
}

36. Using MediaQuery in a Login Screen

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    final horizontalPadding =
        width < 600 ? 20.0 : 40.0;

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(
              horizontal: horizontalPadding,
              vertical: 24,
            ),
            child: ConstrainedBox(
              constraints: const BoxConstraints(
                maxWidth: 450,
              ),
              child: Column(
                children: [
                  const Icon(
                    Icons.lock,
                    size: 70,
                  ),
                  const SizedBox(height: 24),
                  const Text(
                    'Login',
                    style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 24),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: 'Email',
                      border: OutlineInputBorder(),
                    ),
                  ),
                  const SizedBox(height: 16),
                  const TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      labelText: 'Password',
                      border: OutlineInputBorder(),
                    ),
                  ),
                  const SizedBox(height: 20),
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: () {},
                      child: const Text('Login'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

37. Using MediaQuery for a Dashboard

class DashboardPage extends StatelessWidget {
  const DashboardPage({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    final columns = width < 600
        ? 1
        : width < 1000
            ? 2
            : 4;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Dashboard'),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(16),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: columns,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
        ),
        itemCount: 8,
        itemBuilder: (context, index) {
          return Card(
            child: Center(
              child: Text(
                'Dashboard Card ${index + 1}',
              ),
            ),
          );
        },
      ),
    );
  }
}

38. Complete MediaQuery Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const ResponsivePage(),
    );
  }
}

class ResponsivePage extends StatelessWidget {
  const ResponsivePage({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.sizeOf(context);
    final width = size.width;

    final isCompact = width < 600;
    final isMedium = width >= 600 && width < 1000;

    return Scaffold(
      appBar: AppBar(
        title: const Text('MediaQuery Demo'),
      ),
      body: SafeArea(
        child: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(
              maxWidth: 1200,
            ),
            child: Padding(
              padding: EdgeInsets.all(
                isCompact ? 16 : 32,
              ),
              child: Column(
                children: [
                  Text(
                    'Responsive Flutter UI',
                    style: TextStyle(
                      fontSize: isCompact ? 24 : 34,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 20),
                  Expanded(
                    child: GridView.count(
                      crossAxisCount: isCompact
                          ? 1
                          : isMedium
                              ? 2
                              : 3,
                      crossAxisSpacing: 16,
                      mainAxisSpacing: 16,
                      children: List.generate(
                        6,
                        (index) => Card(
                          child: Center(
                            child: Text(
                              'Card ${index + 1}',
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

39. MediaQuery Rebuild Behavior

When a widget depends on a specific MediaQuery property through a specialized API, it can rebuild when that property changes.

For example:

final width = MediaQuery.sizeOf(context).width;

The widget depends on the size information. If the application window is resized, the relevant widget can rebuild with the updated size.

Using the full object:

final data = MediaQuery.of(context);

creates a broader dependency because the widget can respond to changes in the MediaQueryData object. Flutter recommends specific methods when only one property is required. :contentReference[oaicite:8]{index=8}

40. Avoid Caching MediaQuery Size

Do not store a MediaQuery size in a long-lived variable and assume it will always remain correct.

Prefer:

@override
Widget build(BuildContext context) {
  final width = MediaQuery.sizeOf(context).width;

  return Container(
    width: width * 0.8,
  );
}

This allows the widget to respond when the window size changes. Flutter's documentation notes that caching a previously returned MediaQuery size can lead to non-responsive behavior. :contentReference[oaicite:9]{index=9}

41. MediaQuery.maybeOf()

If there may not be a MediaQuery ancestor, the nullable API can be used.

final data = MediaQuery.maybeOf(context);

if (data != null) {
  print(data.size);
}

Similarly, there are nullable variants such as:

final size = MediaQuery.maybeSizeOf(context);

The maybe APIs return null instead of throwing when no MediaQuery is available. :contentReference[oaicite:10]{index=10}

42. Creating a Custom MediaQuery

Most application code does not need to create a MediaQuery manually. Flutter normally provides one through the application widget tree.

However, MediaQuery can be created explicitly when a subtree needs customized media information.

MediaQuery(
  data: MediaQuery.of(context).copyWith(
    padding: EdgeInsets.zero,
  ),
  child: const MyWidget(),
)

Use this carefully because changing MediaQuery data affects how descendant widgets interpret the environment.

43. MediaQuery and Text Scaling Control

Flutter provides utilities for controlling text scaling in a specific subtree when there is a genuine UI requirement.

MediaQuery.withClampedTextScaling(
  minScaleFactor: 1.0,
  maxScaleFactor: 1.5,
  child: const MyWidget(),
)

This applies a clamped text scaler to the descendant subtree. It should not be used simply to ignore accessibility preferences; text scaling should generally remain accessible and usable. :contentReference[oaicite:11]{index=11}

44. MediaQuery.withNoTextScaling()

Flutter also provides a method to disable text scaling for a specific subtree.

MediaQuery.withNoTextScaling(
  child: const Icon(
    Icons.favorite,
  ),
)

This can be appropriate for elements such as icon-font content where text scaling is not semantically appropriate. It should not be used to disable user text scaling for normal readable content. :contentReference[oaicite:12]{index=12}

45. Common Mistakes

• Using MediaQuery.of(context) when only width is required.
• Assuming MediaQuery width always equals the physical device screen width.
• Using device type instead of available window size.
• Using orientation as the only responsive condition.
• Using too many fixed pixel dimensions.
• Stretching text fields across very large desktop windows.
• Ignoring keyboard insets.
• Ignoring SafeArea requirements.
• Ignoring accessibility text scaling.
• Caching MediaQuery size and using it after the window changes.
• Creating too many arbitrary breakpoints.
• Putting every responsive decision into one giant widget.

46. Best Practices

1. Use MediaQuery.sizeOf(context) when you need the application window size.
2. Use MediaQuery.paddingOf(context) when you specifically need padding.
3. Use specialized MediaQuery APIs instead of retrieving the entire MediaQueryData unnecessarily.
4. Base major layout decisions on available space.
5. Use LayoutBuilder when a component needs its parent's constraints.
6. Use SafeArea for content that should avoid system UI.
7. Use maximum widths for large-screen content.
8. Use flexible widgets such as Expanded and Flexible.
9. Respect text scaling and accessibility settings.
10. Test applications by resizing the window.
11. Keep responsive logic reusable.
12. Do not assume that a device category determines available application space.

47. MediaQuery Quick Revision

48. Practice Exercises

1. Create a Flutter screen that displays its current width and height.
2. Create a layout with one column below 600 pixels and two columns above 600 pixels.
3. Create a responsive login form using MediaQuery.
4. Create a dashboard that displays one, two, or three cards per row.
5. Create a responsive navigation system using NavigationBar and NavigationRail.
6. Display different padding values for compact and large layouts.
7. Create a page that reacts to the keyboard using viewInsets.
8. Create a large-screen layout with a maximum content width.
9. Test your application by resizing the desktop/web window.
10. Compare MediaQuery.sizeOf and LayoutBuilder in the same application.

49. Official Flutter Resources

• Flutter MediaQuery API Documentation
• Flutter MediaQueryData API Documentation
• Flutter General Approach to Adaptive Apps
• Flutter SafeArea and MediaQuery
• Flutter Adaptive Design Best Practices

50. Learn Flutter with JustAcademy

For structured Flutter learning, practical examples, and project-based training, visit the JustAcademy Flutter Training Course.

You can also register for a demonstration through the JustAcademy Flutter Course Demo Registration page.

Conclusion

MediaQuery is one of the most useful Flutter APIs for building responsive and adaptive applications. It provides access to application window dimensions, safe-area information, keyboard insets, text scaling, brightness, accessibility settings, orientation, and other media-related information. For modern Flutter development, prefer focused APIs such as MediaQuery.sizeOf() and MediaQuery.paddingOf() when you need individual properties. Combine MediaQuery with LayoutBuilder, Expanded, Flexible, Wrap, GridView, ConstrainedBox, and SafeArea to create interfaces that adapt naturally to different available spaces.